<template>
	<div class="payment">
		<slot name="one">
			<div class="title">
				<router-link to="add">
					<img src="../../public/arrow_left.png" alt="">
				</router-link>
				<p class="users">在线支付</p>
			</div>
			<div class="shijian">
				<p>支付剩余时间</p>
				<div class="dao">
					<span>{{this.hour+'0'}}</span>
					<span>:</span>
					<span>{{this.min}}</span>
					<span>:</span>
					<span>{{this.sec}}</span>
				</div>
			</div>
			<p class="xuan">选择支付方式</p>
			<div class="zhifubao">
				<img src="../js/img/zhifubao_c.png" alt="" class="zhi">
				<span>支付宝</span>
				<p @click="xian" class="xianshi">
					<img src="../js/img/duihao1.png" alt="" :class="wu ? 'img1' : 'img2'">
					<img src="../js/img/duihao0.png" alt="" :class="wu ? 'img2' : 'img1'">	
				</p>
				
			</div>
			<div class="weixin">
				<img src="../js/img/weixintuijian_c.png" alt="" class="wei">
				<span>微信</span>
				<p @click="yin" class="yincang">
					<img src="../js/img/duihao1.png" alt="" :class="xue ?'img1' : 'img2'">
					<img src="../js/img/duihao0.png" alt=""  :class="xue ?'img2' : 'img1'">
				</p>
				
			</div>
			<button @click="affirm" class="que">确认支付</button>
			<div class="bj" v-show="isstatic">
				<div class="pop_up">
					<img src="../js/img/gantanhao.png" alt="" />
					<p>{{ test }}</p>
					<p class="sure" @click="sure">确认</p>
				</div>
			</div>
		</slot>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				hour: 0,
				min: 14,
				sec: 59,
				isstatic: true,
				test: "",
				wu:true,
				xue:false,
			}
		},
		created() {
			this.countDown();
			this.test = '暂不开放支付功能'
		},
		methods: {
			xian(){
				this.wu = true;
				this.xue = false
			},
			yin(){
				this.wu = false;
				this.xue = true
			},
			sure() {
				let obj = this;
				if (obj.test == '暂不开放支付功能') {
					obj.isstatic = false;
				} else if (obj.test == '当前环境无法支付,请打开官方APP进行付款') {
					obj.$router.push('add')
				} else if (obj.test == '请求超时') {
					obj.isstatic = false;
				}
			},
			affirm() {
				this.isstatic = true;
				this.test = '当前环境无法支付,请打开官方APP进行付款'
			},
			countDown() {
				let timer = setInterval(() => {
					this.sec--;
					if (this.sec <= 9) {
						this.sec = '0' + this.sec;
						if (this.sec <= '00') {
							this.sec = 59
							this.min--
							if (this.min <= 9) {
								this.min = '0' + this.min
								if (this.min <= '00') {
									this.min = '00'
									if (this.sec <= '00') {
										this.sec = '00'
									}
								}
							}
							if (this.sec && this.min == '00') {
								this.sec = this.min = '00'
								this.isstatic = true;
								this.test = '请求超时'
								clearInterval(timer)
							}
					}
					
					}
				}, 1000);
			},
		}
	}
</script>

<style scoped>
	.payment {
		width: 320px;
		height: 568px;
	}

	.title {
		width: 320px;
		height: 39px;
		background-color: #007AFF;
		line-height: 39px;
		text-align: center;
	}

	.title img {
		width: 30px;
		height: 35px;
		float: left;
		margin-left: 10px;
		margin-top: 5px;
	}

	.users {
		font-size: 16px;
		color: white;
	}

	.shijian {
		width: 320px;
		height: 126px;
		background-color: white;
		/* line-height: 126px; */
		text-align: center;
		font-size: 12px;
		color: #666666;
		position: relative;
	}

	.shijian p {
		width: 292px;
		height: 16px;
		position: absolute;
		margin-top: 40px;
	}

	.dao {
		width: 292px;
		height: 36px;
		/* background-color: pink; */
		position: absolute;
		margin-top: 60px;
		margin-left: 10px;
	}

	.dao span {
		font-size: 30px;
	}

	.xuan {
		width: 320px;
		height: 36px;
		font-size: 14px;
		background-color: #F1F1F1;
		text-indent: 14px;
		line-height: 36px;
	}

	.zhifubao {
		width: 320px;
		height: 68.5px;
		background-color: white;
		line-height: 68px;
		position: relative;
	}
	

	.zhi {
		width: 40px;
		height: 40px;
		margin-top: 14px;
		margin-left: 14px;
		position: absolute;
	}

	.zhifubao span {
		color: #666666;
		font-size: 14px;
		position: absolute;
		margin-left: 60px;
	}

	.weixin span {
		color: #666666;
		font-size: 14px;
		position: absolute;
		margin-left: 60px;
	}

	.weixin {
		width: 320px;
		height: 68.5px;
		background-color: white;
		line-height: 68px;
		position: relative;
	}
	.xianshi, .yincang{
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
		top: 15px;
	}
	.img1{
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
		top: 15px;
	}
	.img2{
		width: 20px;
		height: 20px;
		position: absolute;
		right: 10px;
		top: 15px;
		display: none;
	}

	.wei {
		width: 40px;
		height: 40px;
		margin-top: 14px;
		margin-left: 14px;
		position: absolute;
	}

	.bj {
		width: 320px;
		height: 568px;
		background-color: rgba(0, 0, 0, 0);
		/* background-color: #000000; */
		position: fixed;
		top: 0;
		left: 0;
	}

	.pop_up {
		width: 240px;
		height: 158px;
		background: white;
		border-radius: 10px;
		top: 200px;
		left: 40px;
		position: fixed;
		text-align: center;
	}

	.pop_up img {
		height: 60px;
		width: 60px;
		margin-top: 20px;
		/* padding-top: 40px; */
	}

	.sure {
		width: 240px;
		height: 36px;
		line-height: 36px;
		color: white;
		background-color: #4cd964;
		border-radius: 5px;
		margin-top: 35px;
		font-size: 20px;
	}

	.test {
		display: inline-block;
		position: fixed;
		right: 10px;
		padding: 20px 20px;
	}

	.que {
		width: 292px;
		height: 36px;
		border: none;
		outline: none;
		border-radius: 5px;
		background-color: #4CD964;
		color: white;
		font-size: 16px;
		margin-left: 10px;
		margin-top: 10px;
	}
</style>
